<template>
  <div>
    <h1>注册</h1>
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
      <title>美多商城-注册</title>

    </head>
    <body>
    <div class="register_con">
      <div class="l_con fl">
        <a href="index.html" class="reg_logo"><img src="@static/images/logo.png"></a>
        <div class="reg_slogan">商品美 · 种类多 · 欢迎光临</div>
        <div class="reg_banner"></div>
      </div>

      <div class="r_con fr">
        <div class="reg_title clearfix">
          <h1>用户注册</h1>
          <a href="login.html">登录</a>
        </div>
        <div class="reg_form clearfix">
          <form method="post" class="register_form">
            <ul>
              <li>
                <label>用户名:</label>
                <input type="text" name="user_name" id="user_name" v-model="form.username" @blur="regs">
                <span class="error_tip">{{ error.username }}</span>
              </li>
              <li>
                <label>密码:</label>
                <input type="password" name="pwd" id="pwd" v-model="form.password" @blur="passwo">
                <span class="error_tip">{{ error.password }}</span>
              </li>
              <li>
                <label>确认密码:</label>
                <input type="password" name="cpwd" id="cpwd" v-model="query_password" @blur="query_pas">
                <span class="error_tip">{{error.query_password}}</span>
              </li>
              <li>
                <label>手机号:</label>
                <input type="text" name="phone" id="phone" v-model="form.mobile" @blur="mob">
                <span class="error_tip">{{ error.mobile }}</span>
              </li>
              <li>
                <label>图形验证码:</label>
                <input type="text" name="pic_code" id="pic_code" class="msg_input" v-model="txyzm">
                <img :src="image_code_url" alt="图形验证码" class="pic_code" @click="generate_image_code">
                <span class="error_tip">请填写图形验证码</span>
              </li>
              <li>
                <label>短信验证码:</label>
                <input type="text" name="msg_code" id="msg_code" class="msg_input" v-model="dxyzm" @blur="dxyzms">
                <button @click.prevent="getSmsCode" :disabled="flag">{{mes}}</button>
                <span class="error_tip">{{error.tdxyzm}}</span>
              </li>
              <li class="agreement">
                <input type="checkbox" name="allow" id="allow" checked="checked" v-model="zt" @click="h">
                <label>同意”美多商城用户使用协议“</label>
                <span class="error_tip">{{error.ts}}</span>
              </li>
              <li class="reg_sub">
                <input type="submit" value="注 册" @click.prevent="zhuce">
              </li>
            </ul>
          </form>
        </div>

      </div>

    </div>

    <div class="footer no-mp">
      <div class="foot_link">
        <a href="#">关于我们</a>
        <span>|</span>
        <a href="#">联系我们</a>
        <span>|</span>
        <a href="#">招聘人才</a>
        <span>|</span>
        <a href="#">友情链接</a>
      </div>
      <p>CopyRight © 2016 北京美多商业股份有限公司 All Rights Reserved</p>
      <p>电话：010-****888 京ICP备*******8号</p>
    </div>

    </body>
    </html>
  </div>
</template>

<script>
import '@static/css/reset.css'
import '@static/css/main.css'
import {v4 as uuid4} from 'uuid'

export default {
  name: "reg",
  data() {
    return {
      form: {},
      dxyzm:"",
      error: {username: '', mobile: '',password:'',query_password:"",tdxyzm:"",ts:""},
      mes:'获取短信验证码',
      flag:false,
      time:60,
      image_code_url:'',
      uid:"",
      txyzm:"",
      zt:false,
      query_password:"",

    }
  },
  methods: {
    h(){
      if (this.zt==true){
        this.error.ts="请勾选用户协议"
      }
      else {
        this.error.ts=""
      }
    },

    //账号
    regs() {
      //是否为空
      let name = this.form.username
      if (name == undefined) {
        this.error.username = '用户名不能为空'
      }
      //格式
      let reg = /\w{5,12}$/
      if (!reg.test(name)) {
        this.error.username = '请输入正确的格式'
      }
      //是否为空
      this.$axios.post('users/RegAPI/', this.form)
        .then(res => {
          if (res.data.code == 10010) {
            this.error.username = '用户名不能为空'
            return false
          }
          if (res.data.code == 10011) {
            this.error.username = '请输入正确的格式'
            return false
          }
          if (res.data.code == 10012) {
            this.error.username = '账号已存在'
            return false
          }
          this.error.username = ''
        })
    },
    //手机号
    mob() {
      //判断为空
      let name = this.form.mobile
      if (name == undefined || name =='' || name == null) {
        this.error.mobile = '手机号不能为空'
        return false
      }
      let reg = /^1[3-9]\d{9}$/
      if (!reg.test(name)) {
        this.error.mobile = '请输入正确格式的手机号'
        return false
      }
      this.$axios.post('users/RegAPI/', this.form)
        .then(res => {
          if (res.data.code == 10013) {
            this.error.mobile = '电话不能为空'
            return false
          }
          if (res.data.code == 10014) {
            this.error.mobile = '请输入正确的格式'
            return false
          }
          if (res.data.code == 10015) {
            this.error.mobile = '电话已存在'
            return false
          }
          this.error.mobile = ''
        })
    },
    passwo(){
        let name = this.form.password
        if (name == undefined || name=='' || name==null){
          this.error.password = "密码不能为空"
          return false
        }
        let reg = /^\w{8,20}$/
      if (!reg.test(name)) {
        this.error.password = "密码8-20位格式不正确"
        return false
      }
      this.$axios.post('users/RegAPI/', this.form)
        .then(i => {
          if (i.data.code == 10016) {
            this.error.password = "密码不能为空"
            return false
          }
          if (i.data.code == 10017){
            this.error.password = "密码格式不正确"
            return false
          }
          this.error.password = ''
        })
    },
    query_pas(){
      if (this.form.password !== this.query_password){
        this.error.query_password = "两次密码不一致"
        return false
      }
      this.$axios.post('users/RegAPI/',this.form)
      .then(i=>{
        if (i.data.code == 10018){
          this.error.query_password = '两次密码不一致'
          return false
        }
        this.error.query_password = ''
      })
    },
    dxyzms(){
      let dxyzm = this.dxyzm
      if (dxyzm == undefined || dxyzm==null || dxyzm==""){
        this.error.tdxyzm = "验证码不能为空"
        return false
      }
      this.$axios.post('users/RegAPI/',this.form)
      .then(i=>{
        if (i.data.code == 10019){
          this.error.tdxyzm = "验证码不能为空"
          return false
        }
        if (i.data.code == 10020){
          this.error.tdxyzm = "验证码错误"
          return false
        }
        this.error.tdxyzm = ''
      })
    },

    getSmsCode(){
      this.$axios.post('users/SedSms/',{'mobile':this.form.mobile,'uuid':this.uid,'txyzm':this.txyzm})
      .then(res=>{
        if(res.data.code==200){
          let m = setInterval(()=>{
            this.time--
            this.flag=true
            this.mes=this.time+'秒以后再操作'
            if(this.time==0){
              clearInterval(m)
              this.time=60
              this.flag = false
              this.mes = '获取短信验证码'
            }
          },1000)
        }
      })
    },
    generate_image_code(){
      this.uid = uuid4()
      this.image_code_url = 'http://127.0.0.1:8000/users/ImageCodeAPIView/?uuid='+this.uid
    },
    zhuce(){
      this.regs()
      this.mob()
      this.passwo()
      this.query_pas()
      this.dxyzms()
      if (this.zt == true){
        this.$axios.post("users/add_urser/",this.form)
        .then(i=>{
        })
      }
      else {
        alert("请勾选我同意")
      }
    }
  },
  mounted() {
    this.generate_image_code()
    this.h()
  }
}
</script>

<style scoped>

</style>
